<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Winter</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  </head>
  <style>
    .class1{
      background-color: #444;
      color: #eee;
    }
  </style>
  <body>
    <div id="app"></div>
    <!-- <div id="myComponent">
      <runoob></runoob>
    </div>
    <div id="fatherApp">
      <child message='hello!'></child>
    </div>
    <div id="fatherToChild">
      <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:message="parentMsg"></child>
      </div>
    </div>
    <div id="repeatFatherToChild">
      <ol>
        <todo-item v-for="(item, index) in sites" :key="index" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    <div id="customEventApp">
      <div id="counter-event-example">
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementalTotal"></button-counter>
        <button-counter v-on:increment="incrementalTotal"></button-counter>
      </div>
    </div>
    <div id="components-demo3" class="demo">
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
      <button-counter2></button-counter2>
    </div> -->
    <script>
    Vue.component('runoob', {
      template: '<h1>自定义组件!</h1>'
    })
    var runoobVue = new Vue({
      el: '#myComponent'
    })
    Vue.component('child', {
      props: ['message'],
      template: '<span>{{ message }}</span>'
    })
    var fatherVue = new Vue({
      el:'#fatherApp'
    })
    var fatherToChild = new Vue({
      el:"#fatherToChild",
      data() {
        return {
          parentMsg: '父组件的内容'
        }
      },
    })
    //  重复传到 todo-item 中去
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    var repeatTransportVue = new Vue({
      el: '#repeatFatherToChild',
      data: {
        sites: [
          { text: 'De' },
          { text: 'Long' },
          { text: 'Yang' }
        ]
      }
    })
    Vue.component('example', {
      props: {
        propA: Number, // 基础类型检测 （`null` 意思是任何类型都可以）
        propB: [String, Number], // 多种类型
        propC: {   // 必传且是字符串
          type: String,
          required: true
        },
        propD: { // 数字，有默认值
          type: Number,
          default: 100
        },
        propE: {   // 数组／对象的默认值应当由一个工厂函数返回
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        proF: { // 自定义验证函数
          validator: function (value) {
            return value > 10
          }
        }
      }
    })
    // 使用自定义的事件 这个事件被命名为了 increment
    Vue.component('button-counter', {
      template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')// 手动出发这个自定义的方法
        }
      }
    })
    var customEventAppVue = new Vue({
      el: '#customEventApp',
      data: {
        total: 0
      },
      methods: {
        incrementalTotal: function () {
          this.total += 1
        }
      },
    })
    // 自定义控件 公用一个数据源  和上面两个不同 子按钮的数据是分开的
    var buttonCounter2Data = {
      count: 0
    }
    Vue.component('button-counter2', {
      data: function () {
        return buttonCounter2Data
      },
      template: '<button v-on:click="count++">点击了 {{ count }} 次。</button>'
    })
    var component_demo3 = new Vue({
      el: '#components-demo3'
    })
//     子组件通过 $emit 触发父组件的方法时，如果需要传递参数，可在方法名后面加参数数组。

// 比如 $emit("FunctionName") 当要传递参数时 ：$emit("FunctionName",[arg1,arg2...])。
    
    </script>
    <!-- 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。
    每当父组件的数据变化时，该变化也会传导给子组件： -->
    <!-- 注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 -->
    <!-- Prop 验证
      组件可以为 props 指定验证要求。
      prop 是一个对象而不是字符串数组时，它包含验证要求： -->
    <!-- <div id="vue_det">
      <h1>site : {{site}}</h1>
      <h1>url : {{url}}</h1>
      <h1>{{details()}}</h1>
    </div>
    <div id="vue_det_two">  
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
    </div>
    <div id="vue_det_three">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
    </div>
    <div id="v_html">
      <div v-html="message"></div>
    </div>
    <div id="v_bind">
      <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
      <br/><br/>
      <div v-bind:class="{'class1':use}">
        v-bind:class  指令
      </div>
    </div>

    <div id="v_dddd">
      {{5+5}}<br>
      {{ok ? 'YES' : 'NO'}}<br>
      {{message.split(',').reverse().join(.)}}
      <div v-bind:id = "'list-' + id"></div>
    </div>
    <div id="v_bind_href">
      <pre><a v-bind:href="url">菜鸟教程</a></pre>
    </div>

    <div v-on:click="v_on_event">v_on_event</div>
    <div id="v_input_change">
      <p>{{message}}</p>
      <input v-model="message">
    </div>

    <div id="v_model">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">反转字符串</button>
    </div>

    <div id="v_filter">
      {{message | capitalize}}
    </div>

    <a v-bind:href='url'></a>
    <a :href=''></a>
    <a v-on:click="doSomething">doSomething</a>
    <a @click="doSomething">doSomething</a>

    <div id="v_if">
      <p v-if="seen">你好德龙</p>
      <template v-if="ok">
        <h1>德龙</h1>
        <p>学的不仅是技术,更是梦想</p>
        <p>哈哈哈</p>
      </template>
    </div>

    <div id="v-if-else">
      <div v-if="type === 'A'">
        A  
      </div>
      <div v-else-if="type === 'B'">
        B
      </div>
      <div v-else>
        Not A/B/C
      </div>
    </div>

    <div id="v_show">
      <h1 v-show="ok">Hello！ 德龙</h1>
    </div> -->

    <!-- <script>

      // 第一种 这种内嵌的没有办法改变这些值
      var vm = new Vue({
        el:'#vue_det',
        data:{
          site:"菜鸟教程",
          url:"www.baidu.com",
          alexa:"10000"
        },
        methods:{
          details:function(){
            return this.site + " :那么问题来了,养猪哪家强? 深圳南山找老杨"
          }
        }
      })

      // 我们使用第二种 data 关联了 vue 的属性data 并且修改了data的值 
      // 我们的数据对象
      var data = { site: "潜水的鹦鹉鱼", url: "www.ignitecn.com", alexa: 1000}
      var vm_two = new Vue({
        el:'#vue_det_two',
        data:data
      })
      // 我们测试第三种 使用了$ 符号
      var data_three =  { site: "three_菜鸟教程", url: "www.three.com", alexa: 9900}
      var vm_three = new Vue({
          el: '#vue_det_three',
          data: data_three
      })
      
      // 它们引用相同的对象！
      document.write(vm_two.site === data.site) // true
      document.write("<br>")
      // 设置属性也会影响到原始数据
      vm_two.site = "Runoob"
      document.write(data.site + "<br>") // Runoob
      
      // ……反之亦然
      data.alexa = 1234
      document.write(vm_two.alexa) // 1234   这样写出来的样式和前面的还是有不同的  这些写的都是在vue渲染之后才会写

      document.write("<br>") 
      document.write(vm_three.$data === data_three) // ！！！ 注意： true  实际操作中并没有生效
      document.write("<br>") 
      document.write(vm_three.$el === document.getElementById('vue_det_three')) // ！！！ 注意事： true 实际操作中并没有生效

      var htmlVue = new Vue({
        el:'#v_html',
        data:{
          message:'<h1>德龙的H1标签</h1>'
        }
      })

      var bindVue = new Vue({
        el:"#v_bind",
        data:{
          use:false
        }
      })

      //  id 是作为一个绑定的数据  还是单纯地演示{} 中的表达式 
      var bindIdVue = new Vue({
        el:"#v_dddd",
        data:{
          ok:true,
          message:'Hello,德龙,Come,On',
          id:1
        }
      })

      var  bindHref = new Vue({
        el:"#v_bind_href",
        data:{
          url:"http://www.baidu.com"
        }
      })

      // v-on 用于监听 dom 事件
      function v_on_event(){
        console.log('this is one event')
      }

      var v_input_change = new Vue({
        el:"#v_input_change",
        data:{
          message:"这里可以点击，可以输入文字" 
        }
      })

      //  指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
      var v_model_vue = new Vue({
        el:"#v_model",
        data:{
          message:'你好,德龙'
        },
        methods:{
          reverseMessage:function(){
            this.message = this.message.split('').reverse().join('')
          }
        }
      })

      // 使用 vue 的filter 来过滤数据  slice 从某个下标剪切
      // 过滤器还可以串联  就像管道过滤一样
      var filterVue = new Vue({
        el:"#v_filter",
        data:{
          message:'runnoob'
        },
        filters:{
          capitalize: function(value){
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
          }
        }
      })

      // v-else v-else-if 必须跟在 v-if 之后 
      var v_if_else = new Vue({
        el:"#v-if-else",
        data:{
         type:'C'
        }
      })

      var vShowVue = new Vue({
        el:"#v_show",
        data:{
          ok: true
        }
      })

      // 语法的缩写 
    </script>  -->
  </body>
</html>
